<template>
	<view class="wallet-record-page">
		<!-- 顶部选项卡 -->
		<view class="record-tabs">
			<view v-for="(tab, idx) in tabs" :key="tab.value" class="tab-item" :class="{ active: type === tab.value }"
				@click="changeType(tab.value)">
				{{ tab.label }}
			</view>
		</view>
		<!-- 明细列表 -->
		<view class="record-list">
			<view v-for="item in recordList" :key="item.id" class="record-item">
				<view class="record-row">
					<text class="record-type">{{ item.typeText }}</text>
					<text :class="['record-amount', item.amount > 0 ? 'plus' : 'minus']">{{ item.amount > 0 ? '+' : ''
						}}{{ item.amount }}</text>
				</view>
				<view class="record-desc">{{ item.desc }}</view>
				<view class="record-time">{{ formatTime(item.time) }}</view>
			</view>
			<u-loadmore :status="loadStatus" />
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';
export default {
	data() {
		return {
			tabs: [
				{ label: '消费', value: 1 },
				{ label: '充值', value: 2 },
				{ label: '退款', value: 3 }
			],
			type: 1, // 默认显示消费
			recordList: [],
			page: 1,
			loadStatus: 'loadmore', // loadmore/loading/nomore
			finished: false
		}
	},
	computed: {
	},
	onShow() {
		this.page = 1;
		this.recordList = [];
		this.finished = false;
		this.loadStatus = 'loadmore';
		this.getRecordList();
	},
	onReachBottom() {
		if (!this.finished && this.loadStatus !== 'loading') {
			this.page++;
			this.getRecordList();
		}
	},
	methods: {
		changeType(type) {
			this.type = type;
			this.recordList = [];
			this.page = 1;
			this.getRecordList();
		},
		async getRecordList() {
			this.loadStatus = 'loading';
			const res = await request.httpTokenRequest({ url: `/api/index/getMoneyLog?page=${this.page}&type=${this.type}`, method: 'get' });
			console.log('getBalanceRecord接口返回', res);
			if (res.data && res.data.code == 1) {
				const list = res.data.data.data || [];
				console.log(list, 'list');

				this.recordList = this.recordList.concat(list.map(item => {
					let amount = Number(item.money);
					
					// 根据类型调整金额显示
					// 消费类型(type=1)应该显示为负数
					if (this.type === 1 && amount > 0) {
						amount = -amount; // 消费记录显示为负数
					}
					
					return {
						...item,
						typeText: item.memo,
						amount: amount,
						desc: item.desc || '',
						time: item.createtime
					};
				}));
				
				if (list.length < this.pageSize) {
					this.loadStatus = 'nomore';
					this.finished = true;
				} else {
					this.loadStatus = 'loadmore';
				}
			} else {
				this.loadStatus = 'nomore';
				this.finished = true;
			}
		},
		typeText(type) {
			if (type == 'recharge') return '充值';
			if (type == 'consume') return '消费';
			if (type == 'refund') return '退款';
			return '其他';
		},
		formatTime(ts) {
			if (!ts) return '';
			const date = new Date(ts.toString().length === 10 ? ts * 1000 : ts);
			const y = date.getFullYear();
			const m = (date.getMonth() + 1).toString().padStart(2, '0');
			const d = date.getDate().toString().padStart(2, '0');
			const h = date.getHours().toString().padStart(2, '0');
			const min = date.getMinutes().toString().padStart(2, '0');
			return `${y}-${m}-${d} ${h}:${min}`;
		}
	}
}
</script>

<style lang="scss">
.wallet-record-page {
	min-height: 100vh;
	background: #f5f7fa;

	.record-tabs {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #fff;
		border-radius: 0 0 32rpx 32rpx;
		padding: 0 0 12rpx 0;
		box-shadow: 0 2rpx 12rpx rgba(90, 156, 248, 0.06);

		.tab-item {
			flex: 1;
			text-align: center;
			font-size: 30rpx;
			padding: 32rpx 0 18rpx 0;
			color: #888;
			position: relative;
			font-weight: 500;

			&.active {
				color: #2468f2;
				font-weight: bold;

				&::after {
					content: '';
					display: block;
					width: 48rpx;
					height: 6rpx;
					background: #2468f2;
					border-radius: 6rpx;
					margin: 0 auto;
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
				}
			}
		}
	}

	.record-list {
		padding: 32rpx 24rpx 0 24rpx;

		.record-item {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			padding: 32rpx 24rpx 24rpx 24rpx;
			box-shadow: 0 2rpx 12rpx rgba(90, 156, 248, 0.06);

			.record-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 8rpx;

				.record-type {
					font-size: 30rpx;
					color: #2468f2;
				}

				.record-amount {
					font-size: 32rpx;
					font-weight: bold;
				}

				.plus {
					color: #1ecb7b;
				}

				.minus {
					color: #f56c6c;
				}
			}

			.record-desc {
				color: #888;
				font-size: 26rpx;
				margin-bottom: 6rpx;
			}

			.record-time {
				color: #bbb;
				font-size: 24rpx;
			}
		}
	}
}
</style>